---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
	const posts = await getCollection('blog');
	return posts.map((post) => ({
		params: { slug: post.slug },
		props: post,
	}));
}

const post = Astro.props;
const { Content } = await post.render();
---

<BaseLayout
	title={`${post.data.title} - Epicenter`}
	description={post.data.description}
>
	<main class="min-h-screen bg-white">
		<article class="max-w-2xl mx-auto px-6 py-24">
			<header class="mb-16">
				<div class="mb-8">
					<a
						href="/blog"
						class="text-gray-600 hover:text-gray-900 transition-colors"
						>← Back to blog</a
					>
				</div>
				<time class="text-sm text-gray-500"
					>{
						post.data.pubDate.toLocaleDateString('en-US', {
							year: 'numeric',
							month: 'long',
							day: 'numeric',
						})
					}</time
				>
				<h1 class="text-4xl font-semibold text-gray-900 mt-2 mb-8">
					{post.data.title}
				</h1>
			</header>

			<div
				class="prose prose-gray max-w-none prose-headings:font-semibold prose-h2:text-2xl prose-h2:mt-12 prose-h2:mb-6 prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-4 prose-p:text-gray-600 prose-p:leading-relaxed prose-a:text-gray-900 prose-a:underline prose-a:decoration-gray-400 prose-a:underline-offset-2 hover:prose-a:decoration-gray-600 prose-strong:text-gray-900 prose-strong:font-medium prose-code:text-gray-800 prose-code:bg-gray-100 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:font-normal prose-code:before:content-[''] prose-code:after:content-[''] prose-pre:bg-gray-100 prose-pre:text-gray-800 prose-ul:text-gray-600 prose-ol:text-gray-600"
			>
				<Content />
			</div>
		</article>
	</main>
</BaseLayout>
